* {
  margin: 0;
  padding: 0;
}
body{
    background:#333;
    overflow:hidden;
}
#ring{
    box-sizing: border-box;
    position: absolute;
    width:200px;
    height:200px;
    border:1px dashed #1e90ff;
    border-radius: 50%;
    animation:roll 8s linear infinite;
    box-shadow:0 0 5px #1e90ff,0 0 10px #1e90ff,0 0 20px #1e90ff,inset 0 0 5px #1e90ff,inset 0 0 10px #1e90ff,inset 0 0 20px #1e90ff;
    pointer-events: none;
}
@keyframes roll{
    100%{
        transform: rotate(360deg);
        filter:hue-rotate(360deg);
    }
}
#ring .ringtext{
    box-sizing: border-box;
    display:flex;
    justify-content: center;
    align-items: start;
    width:100%;
    height:100%;
    color:#1e90ff;
    position:absolute;
    left:0;
    top:0;
    font-weight: bold;
    font-size:20px;
    filter:hue-rotate(calc(1deg * var(--r)));
    transform:rotate(calc(1deg * var(--r)));
}